<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="650px">
    <h5 class="text-center" style="margin-top:10px">开启自动充值，防止业务停滞</h5>
    <div class="flex justify-center" style="margin-top:20px;margin-bottom:10px">
      <p v-if="type==2" class="font-12 color-666 flex align-center">
        <img style="width:18px;height:18px;margin-right:7px" src="../../../assets/images/tip3.png" alt="">随时随地，短信提醒
      </p>
      <p class="font-12 color-666 flex align-center" :style="{marginLeft:type==2?'80px':'0'}">
        <img style="width:18px;height:18px;margin-right:7px" src="../../../assets/images/tip1.png" alt="">防止欠费，避免损失
      </p>
      <p class="font-12 color-666 flex align-center" style="margin-left:80px">
        <img style="width:18px;height:18px;margin-right:7px" src="../../../assets/images/tip2.png" alt="">减少操作，省时省力
      </p>
    </div>
    <div class="form_info">
      <div class="form_item">
        <label>充值方式：</label>
        <div class="flex-1 flex align-center">
          {{type==1?'合同': type==2?'短信': '风控'}}{{type!=3?'余量':'次数'}}小于
          <el-input style="width:90px;margin-left:10px" placeholder="10" v-model="formData.baseline" clearable
            @input="val=>changeNumberInput('baseline',val)">
          </el-input>
          <span class="suffix" style="margin-right:10px">{{type!=3?'条':'次'}}</span>
          时自动充值
          <el-input style="width:90px;margin-left:10px" placeholder="100" v-model="formData.recharge_num" clearable
            @blur="calculate" @input="val=>changeNumberInput('recharge_num',val)">
          </el-input>
          <span class="suffix">{{type!=3?'条':'次'}}</span>
        </div>
      </div>
      <div class="form_item">
        <label>花费金额：</label>
        <p class="flex-1">
          {{infoData.pay_total}}元<span class="color-999">（{{type==1||type==6?infoData.contract:
          type==2?infoData.sms_amount:infoData.risk_credit_price}}元/{{type!=3?'条':'次'}}）</span>
        </p>
      </div>
      <div class="form_item">
        <label>账户余额：</label>
        <div class="flex-1 flex"><span style="margin-right:20px">{{infoData.shop_balance}}元</span>
          <p>余额不足？<span class="blue-font pointer" @click="goToRecharge">去充值</span></p>
        </div>
      </div>
      <div class="form_item">
        <label>短信提示：</label>
        <div class="flex-1">
          <el-radio v-model="formData.sms_remind" :label="1">开启</el-radio>
          <el-radio v-model="formData.sms_remind" :label="0">关闭</el-radio>
          <span class="color-999" style="margin-left:10px">{{type==1?'开启后将在短信增值服务自动开启':'开启后，账户金额不足将短信提醒'}}</span>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="form_item">
        <label v-if="type!=3">短信提示：</label>
        <div class="flex-1 rule_tip">
          <template v-if="type==1">
            1. 系统每日定时检查一次余量，满足条件则自动充值。<br />
            2. 优先使用可用现金付款，若账户余额不足，则无法充值。<br />
            3. 短信提醒开启后，扣款金额不足时将短信通知店铺联系人。
          </template>
          <template v-if="type==2">
            1. 系统每日定时检查一次余量，满足条件则自动充值。<br />
            2. 充值金额将从账户余额扣除，若账户余额不足，则无法充值。<br />
            3. 短信提醒开启后，扣款金额不足时将短信通知店铺联系人。
          </template>
        </div>
      </div>
    </div>
    <p style="padding-left:50px;margin-top:20px;margin-bottom:10px">
      <el-checkbox :class="{'check_form':showError}" v-model="checked" @change="showError=false">开启及同意<span
          class="blue-font">《增值服务自动充值协议》</span></el-checkbox>
    </p>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { autoRechargeInfo, autoRecharge, riskCreditAutoRecharge, riskRadarCreditAutoRecharge, riskAntCreditAutoRecharge, riskAbCreditAutoRecharge,riskNewCreditAutoRecharge,riskNewUpCreditAutoRecharge,riskMobileCreditAutoRecharge } from '@/api/marketing'
export default {
  props: {
    dialogTitle: {
      type: String
    },
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogVisible: false,
      formData: {
        baseline: '',
        recharge_num: '',
        recharge_type: 1,
        sms_remind: 1
      },
      infoData: {},
      showError: false,
      checked: false
    }
  },
  methods: {
    goToRecharge() {
      let routeData = this.$router.resolve({
        name: 'recharge'
      })
      window.open(routeData.href, '_blank')
    },
    submit() {
      if (!this.formData.baseline) {
        if (this.type != 3) {
          this.$message({
            message: '请输入余量底线',
            type: 'warning'
          })
          return
        } else {
          this.$message({
            message: '请输入最低次数',
            type: 'warning'
          })
          return;
        }
      }
      if (!this.formData.recharge_num) {
        this.$message({
          message: '请输入自动充值条数',
          type: 'warning'
        })
        return
      }
      if (this.infoData.pay_total > parseFloat(this.infoData.shop_balance)) {
        this.$message({
          message: '余额不足，请先充值',
          type: 'warning'
        })
        return
      }
      if (!this.checked) {
        this.$message({
          message: '请勾选开启并同意自动充值协议',
          type: 'warning'
        })
        this.showError = true
        return
      }
      this.formData.recharge_type = this.type
      if(this.type===2){
        autoRecharge(this.formData).then(res => {
          this.dialogVisible = false
          this.$emit('getList')
        })
      }else if(this.type===3){
        riskCreditAutoRecharge(this.formData).then(res => {
          this.dialogVisible = false
          this.$emit('getList')
        })
      }else if(this.type===4){
        autoRecharge(this.formData).then(res => {
          this.dialogVisible = false
          this.$emit('getList')
        })
      }else if(this.type===9){
        riskNewCreditAutoRecharge(this.formData).then(res => {
          this.dialogVisible = false
          this.$emit('getList')
        })
      }else if(this.type===6){
        riskRadarCreditAutoRecharge(this.formData).then(res => {
          this.dialogVisible = false
          this.$emit('getList')
        })
      }else if(this.type===11){
        riskAntCreditAutoRecharge(this.formData).then(res => {
          this.dialogVisible = false
          this.$emit('getList')
        })
      }else if(this.type===8){
        riskAbCreditAutoRecharge(this.formData).then(res => {
          this.dialogVisible = false
          this.$emit('getList')
        })
      }else if(this.type===10){
        riskNewUpCreditAutoRecharge(this.formData).then(res => {
          this.dialogVisible = false
          this.$emit('getList')
        })
      }else if(this.type===12){
        riskMobileCreditAutoRecharge(this.formData).then(res => {
          this.dialogVisible = false
          this.$emit('getList')
        })
      }
     
      // } else if (this.type === 6) {
      //   riskRadarCreditAutoRecharge(this.formData).then(res => {
      //     this.dialogVisible = false
      //     this.$emit('getList')
      //   })
      // } else {
      //   riskCreditAutoRecharge(this.formData).then(res => {
      //     this.dialogVisible = false
      //     this.$emit('getList')
      //   })
      // }
    },
    calculate() {
      let num = this.formData.recharge_num || 0
      let price = 0
      if (this.type === 1) {
        price = parseFloat(this.infoData.contract)
      } else if (this.type === 2) {
        price = parseFloat(this.infoData.sms_amount)
      } else {
        price = parseFloat(this.infoData.risk_credit_price)
      }
      this.$set(this.infoData, 'pay_total', (price * parseInt(num)).toFixed(2))
    },
    getData() {
      autoRechargeInfo(this.type).then(res => {
        this.infoData = { ...res } || {}
        this.calculate()
      })
    },
    changeNumberInput(key, value) {
      const pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式
      // 不符合正整数时
      if (!pattern.test(value)) {
        // input 框绑定的内容为空
        this.formData[key] = ''
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form_info {
  padding: 20px 30px;
  background: #f5f5f5;

  /deep/.el-divider--horizontal {
    margin: 10px 0;
  }
}

.suffix {
  width: 28px;
  height: 28px;
  background: #e6e6e6;
  border-radius: 0px 3px 3px 0px;
  box-sizing: border-box;
  line-height: 28px;
  text-align: center;
}

.check_form {
  /deep/.el-checkbox__inner {
    border-color: #ff4146;
  }
}

.form_item {
  display: flex;
  line-height: 35px;

  &>label {
    width: 100px;
    color: #666666;
  }

  /deep/.el-input__inner {
    height: 28px;
    border-radius: 3px 0px 0px 3px;
  }

  /deep/.el-input__icon {
    line-height: 28px;
  }
}
</style>
